
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>充电运营</title>
<!--    <meta content="投呗用户中心,投呗理财管理" name="Keywords">-->
<!--    <meta content="“投呗”用户中心包含：平台账户充值提现，银行卡信息管理，查看投资记录、资金明细、奖励优惠等信息。" name="description">-->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css?v=1.2.1"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/layer.css"/>
    <script src="../lib/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/jquery.base64.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/wapframwork.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 顶部背景区域 */
        .profile-header {
            background: linear-gradient(to bottom right, #74e6a0, #28a745);
            padding: 24px 16px;
            color: #fff;
        }
        .profile-info {
            display: flex;
            align-items: center;
        }
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 12px;
        }
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .user-info {
            flex: 1;
        }
        .user-phone {
            font-size: 16px;
            margin-bottom: 4px;
        }
        .user-subphone {
            font-size: 14px;
            opacity: 0.8;
        }
        .edit-icon {
            width: 20px;
            height: 20px;
            margin-left: 12px;
        }
        .badge {
            width: 36px;
            height: 36px;
            margin-left: auto;
        }

        /* 收益模块 */
        .profit-box {
            background-color: #fff;
            margin: -16px 16px 16px;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .profit-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .profit-row {
            display: flex;
            justify-content: space-between;
            max-width: 300px;
        }
        .profit-item {
            text-align: center;
        }
        .profit-item span {
            display: block;
            font-size: 14px;
            margin-top: 4px;
        }
        .profit-number {
            font-size: 16px;
            font-weight: bold;
        }

        /* 其他功能模块 */
        .other-box {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .other-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .other-list {
            display: flex;
            flex-wrap: wrap;
        }
        .other-item {
            width: 25%;
            text-align: center;
            margin-bottom: 12px;
        }
        .other-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
        .other-item span {
            display: block;
            font-size: 12px;
        }

        /* 退出登录按钮 */
        .logout-btn {
            display: block;
            width: calc(100% - 32px);
            margin: 16px auto;
            text-align: center;
            background-color: #28a745;
            color: #fff;
            padding: 12px;
            border-radius: 24px;
            text-decoration: none;
            font-size: 16px;
        }

        /* 底部导航 */
        .footer-nav {
            background-color: #fff;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .footer-nav-item {
            text-align: center;
        }
        .footer-nav-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
        .footer-nav-item span {
            display: block;
            font-size: 12px;
        }
        .footer-nav-item.active {
            color: #28a745;
        }
    </style>
</head>
<body>
<!-- 顶部信息区域 -->
<div class="profile-header">
    <div class="profile-info">
        <div class="avatar">
            <!-- 替换为实际头像地址 -->
            <img src="../img/touixang.png" alt="avatar">
        </div>
        <div class="user-info">
            <div class="user-phone">15623454988</div>
<!--            <div class="user-subphone">15623454988</div>-->
        </div>
        <!-- 编辑图标 -->
        <img src="../img/bianji.png" alt="edit" class="edit-icon">
    </div>
</div>

<!-- 收益模块 -->
<div class="profit-box">
    <div class="profit-title">我的收益</div>
    <div class="profit-row">
        <div class="profit-item">
            <span class="profit-number" id="ketixian"></span>
            <span>可提现余额</span>
        </div>
        <div class="profit-item">
            <span class="profit-number" id="zongshouyi"></span>
            <span>总收益</span>
        </div>
    </div>
</div>

<!-- 其他功能模块 -->
<div class="other-box">
    <div class="other-title">其他</div>
    <div class="other-list">
        <div class="other-item" id="manualInvoiceItem1">
            <!-- 消息中心图标 -->
            <img src="../img/xiaoxi.png" alt="message">
            <span>消息中心</span>
        </div>
        <div class="other-item" id="manualInvoiceItem2">
            <!-- 修改手机号图标 -->
            <img src="../img/xiugaishoujihao.png" alt="phone">
            <span>修改手机号</span>
        </div>
        <div class="other-item" id="manualInvoiceItem3">
            <!-- 修改密码图标 -->
            <img src="../img/xiugaimima.png" alt="password">
            <span>修改密码</span>
        </div>
        <div class="other-item" id="manualInvoiceItem4">
            <!-- 联系客服图标 -->
            <img src="../img/lianxikefu.png" alt="service">
            <span>联系客服</span>
        </div>
    </div>
</div>

<!-- 退出登录按钮 -->
<a href="login.html" class="logout-btn">退出登录</a>

<!--	页面底部部分-->
<ul class="footer" style="background: #fff;">
    <li class="footer-item">
        <a href="index.html" class="">
            <i class="icon icon_index"></i>
            <p class="icon_title">首页</p>
        </a>
    </li>
    <li class="footer-item">
        <a href="invest.html" class="">
            <i class="icon icon_invest"></i>
            <p class="icon_title">汽车</p>
        </a>
    </li>
    <li class="footer-item">
        <a href="activity.html" class="">
            <i class="icon icon_activity"></i>
            <p class="icon_title">单车</p>
        </a>
    </li>
    <li class="footer-item">
        <a href="#" class="">
            <i class="icon icon_my active"></i>
            <p class="icon_title" style="color: #368a28">我的</p>
        </a>
    </li>
</ul>
</body>

<!-- 引入数据管理器 -->
<script src="../js/dataManager.js"></script>
<script src="../js/manualInvoiceTip.js"></script>
<script>
    window.onload = () => {
        // 渲染函数：从共享数据更新 DOM
        const render = (data) => {
            document.getElementById('ketixian').textContent = data.totalIncome.toFixed(2);
            document.getElementById('zongshouyi').textContent = data.withdrawableAmount.toFixed(2);
        };

        // 1. 初始化渲染（用持久化数据）
        render(window.dataManager.getSharedData());

        // 2. 监听数据变化：定时更新或跨页修改时自动刷新
        window.dataManager.onDataUpdate(render);

        setupManualInvoiceTip('manualInvoiceItem1');
        setupManualInvoiceTip('manualInvoiceItem2');
        setupManualInvoiceTip('manualInvoiceItem3');
        setupManualInvoiceTip('manualInvoiceItem4');

    };
</script>

<!--<script src="../js/personal.js?v=1.2.1" type="text/javascript" charset="utf-8"></script>-->
</html>
